<script setup>
import Title from '@/components/title.vue';
import BarEchart from '@/components/echart/bar-echart.vue';
import PieEchart from '@/components/echart/pie-echart.vue';
import PowerLine from '@/components/echart/powerLine.vue';
</script>

<template>
    <div class="page">
        <div class="left">
            <Title title="黑名单数据"></Title>
            <div class="container">
                <div class="icon"></div>
                <div class="text">近一月出现黑名单数据</div>
                <div class="number">754</div>
            </div>
        </div>
        <div class="bar">
            <Title title="超时访客数据"></Title>
            <BarEchart class="bar-echart"></BarEchart>
        </div>
        <div class="pie">
            <Title title="业主关环"></Title>
            <PieEchart class="pie-echart"></PieEchart>
        </div>
        <div class="line">
            <Title title="报警数据"></Title>
            <PowerLine class="power-line"></PowerLine>
        </div>
    </div>
</template>

<style scoped lang="scss">
.page {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 50px;
    font-size: 20rem;

    .left {
        flex: 0 0 18%;
        box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);

        .container {
            height: 80%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .icon {
                background-image: url(../../../assets/img/title.png);
                height: 50px;
                width: 50px;
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }

            .text {
                color: #fff;
                padding: 6rem 15rem;
                font-size: 10rem;
                background-color: rgba(24, 57, 149, .2);
            }

            .number {
                color: #5391fd;
                font-size: 30rem;
            }
        }
    }

    .bar {
        flex: 0 0 23%;
        box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
        margin-top: 10px;

        // background: rgb(250, 197, 197);
        .bar-echart {
            height: calc(100% - 50px);
            width: 100%;
        }
    }

    .pie {
        flex: 0 0 23%;
        box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
        // background: rgb(250, 197, 197);
        margin-top: 10px;

        .pie-echart {
            height: calc(100% - 50px);
            width: 100%;
        }
    }

    .line {
        flex: 0 0 25%;
        box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);

        .power-line {
            height: calc(100% - 50px);
            width: 100%;
        }
    }
}
</style>
